<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <script type="module">

        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { EmptyTerrain } from '../../src/og/terrain/EmptyTerrain.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { CanvasTiles } from '../../src/og/layer/CanvasTiles.js';

        const osm = new XYZ("OSM", {
            'specular': [0.0003, 0.00012, 0.00001],
            'shininess': 20,
            'diffuse': [0.89, 0.9, 0.83],
            'isBaseLayer': true,
            'url': "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            'visibility': true,
            'attribution': 'Data @ OpenStreetMap contributors, ODbL'
        });

        let cnv = document.createElement("canvas");
        let ctx = cnv.getContext("2d");
        cnv.width = 256;
        cnv.height = 256;

        const tg = new CanvasTiles("Tile grid", {
            visibility: true,
            isBaseLayer: false,
            drawTile: function (material, applyCanvas) {
                //Clear canvas
                ctx.clearRect(0, 0, cnv.width, cnv.height);

                //Draw border
                ctx.beginPath();
                ctx.rect(0, 0, cnv.width, cnv.height);
                ctx.lineWidth = 2;
                ctx.strokeStyle = 'black';
                ctx.stroke();

                let size;

                //Draw text
                if (material.segment.tileZoom > 14) {
                    size = "26";
                } else {
                    size = "32";
                }
                ctx.fillStyle = 'black';
                ctx.font = 'normal ' + size + 'px Verdana';
                ctx.textAlign = 'center';
                ctx.fillText(material.segment.tileX + "," + material.segment.tileY + "," + material.segment.tileZoom, cnv.width / 2, cnv.height / 2);

                //Draw canvas tile
                applyCanvas(cnv);
            }
        });

        window.globe = new Globe({
            'name': "Earth",
            'target': "globus",
            'terrain': new EmptyTerrain(),
            'layers': [osm, tg],
            "sun": {
                "active": false
            }
        });
    </script>
</body>

</html>